<template>
  <div>
    <!-- v-on 用于绑定事件 -->
     <!-- <button @click="num +=1">按钮</button>
     <p>{{num}}</p>
     <hr>
     <button @click='addMoney(5000)'>程序员敲代码</button>
     <h2>{{money}}</h2> -->
        <button @click='fn(3000)'>发工资啦,我的工资是3000</button><br>
        <button @click='fn(-2800)'>给喜欢的女主播刷了火箭-2800</button><br>
        <button @click='fn(10000)'>送外卖赚了10000</button><br>
        <button @click='fn(-18000)'>给暗恋的女生买了爱马仕-18000</button><br>
        <button @click='fn(8000)'>晚上去做代驾赚了8000</button><br>
        <button @click='fn(-100)'>买泡面100</button><br>
        <button @click='fn(-50)'>买挂逼水50</button><br>
        <p>我这个月还有{{num}}元</p>
        <!-- <input type="text" @keyup="fn()"> -->
        <!-- <div class="box" @mouseenter="fn"></div> -->
   </div>
</template>
 
<script>
export default {
  // 该vue组件的数据源
  data() {
    return {
      num:1,

    };
  },
  //methods用来存放事件，methods是一个对象,里面存放了需要触发的事件
  //事件和事件之间用','隔开
  methods:{
    fn(num){
      this.num +=num
    }
    //在methods当中的函数体里面使用data中的数据时候一定要带this
    //this指的是该组件实例
    // fn(){
    //   console.log(1);
      
    },
    watch:{
    "num" (newVal,oldVal) {
      alert('当前余额为'+ newVal + +'原来余额为' +oldVal)
    }
  }
    // fn1(){
    //   console.log(2);
    // },
    // addMoney(money){
    //   this.money += money
    // }
  }

</script>

<style>
     .box {
      width: 200px;
      height: 300px;
      background-color: red;
     }
</style>